
<html lang="">
	<head>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<meta charset="utf-8">
		<title>汇才创智管理系统</title>
	</head>
	<style type="text/css">
		body {
			background-color: #eeefff;
		}
	</style>
	<body>
		<!-- 左边 -->
		<div id="app">
			<div class="left">
				<h1>汇才创智管理系统</h1>
				<h2>v1.0.1</h2>
			</div>
		</div>
		<!-- 右边 -->
		<div id="app1">
			<div class="right" >
				<p style="color: #FF6600;">登录</p>
				<form action="AdminServlet" method="post">
					<div class="form-group">
						<label class="up">账号</label><input style="width: 200px;" type="name"  />
					</div>
					<div class="form-group">
						<label class="up">密码</label><input style="width: 200px;" type="password"  />
					</div>
					<div class="form-group-img">
						<button type="button" style="border: 0px;" @click="obtain"><img src="img/yz.png" style="width: 100px;height: 30px;"></button><span style="color: #888888;">{{vertion}}</span>
					</div>
										
					<div class="form-group">
						<label class="up">验证码</label><input style="width: 183px;" type="text" v-model="code" />
					</div>
					
					<div class="form-checkbox" style="padding-bottom: 10px;">
						 <input type="checkbox"  /><span>记住我</span>
					</div>
					<div class="form-button">
						<button style="width: 253px;height: 28px; background-color: #FFCC66; border: 0px; border-radius: 3px; color: #FFFFFF;" type="submit"
						 @click="loginGo">登录</button>
					</div>
				</form>
				<div id="footer">
					<p style="margin-top: 95%;">广州汇才创智科技版权所有COPYRIGHT@</p>
					<p>联系我们-网站地图-粤ICP备xxxxxxxx号</p>
				</div>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app1',
			data: {
				// name: '',
				// pwd: '',
				code: '',
				vertion:' '
			},

			methods: {
				obtain:function(){
					var vertion = '';
					//设置长度，这里看需求，我这里设置了6
						var codeLength = 6;
					
						//设置随机字符
						var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
					
						//循环codeLength 我设置的4就是循环4次
						for (var i = 0; i < codeLength; i++) {
							//设置随机数范围,这设置为0 ~ 36
							var index = Math.floor(Math.random() * 9);
					
							//字符串拼接 将每次随机的字符 进行拼接
							vertion += random[index];
						}
					
						//将拼接好的字符串赋值给展示的vertion
						this.vertion = vertion;
						console.log(this, vertion);
						return vertion
				},

				loginGo() {
				window.console.log(this.code)

				if(this.code != this.vertion){
					alert('验证码错误！！')
				}

			}
		}
		})
	</script>
</html>
